<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流</title>
</head>
<body>
<!--
防抖: 单位时间内,频繁触发事件,只会执行最后一次
使用场景:
    1. 搜索框搜索输入,只需要用户最后一次输入完再发送请求
    2. 手机号和邮箱的输入检测
-->

<!--
节流: 单位时间内,频繁触发事件,只执行一次
使用场景:

-->
<div class="box">{{i}}</div>
</body>
<script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
        // 防抖的核心就是利用定时器(setTimeOut)来实现
        /*
        * 声明一个定时器变量
        * 当鼠标每次滑动时先判断有没有定时器,如果有定时器就先清除以前的定时器
        * 如果没有定时器就开启定时器,记得存到变量里面
        * 在定时器里面调用要执行的函数
        * */
        box.innerHTML = i++
    }

    // 防抖
    function debounce(fn , t) {
        let timer
        // return 返回一个匿名函数
        return function () {
            if (timer) clearTimeout()
            timer = setTimeout(function () {
                fn()
            } , t)
        }
    }

    // 节流
    function throttle(fn, t) {
        let timer = null
        return function () {
            if (!timer) {
                timer = setTimeout(function () {
                    fn()
                    timer = null
                } , t)
            }
        }
    }
    box.addEventListener('mousemove' , throttle(mouseMove , 3000))



</script>
<style>
    .box{
        height: 200px;
        width: 200px;
        background-color: aqua;
        color: #fff;
        text-align: center;
        font-size: 100px;
    }
</style>
</html>